<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <!-- <el-form-item label="创建者" prop="createBy">
        <el-input
          v-model="queryParams.createBy"
          placeholder="请输入创建者"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <el-form-item label="昵称" prop="nickname">
        <el-input
          v-model="queryParams.nickname"
          placeholder="请输入昵称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="用户真实姓名" prop="realName" label-width="200">
        <el-input
          v-model="queryParams.realName"
          placeholder="请输入用户真实姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="性别" prop="gender">
		<el-select v-model="queryParams.gender" placeholder="请选择性别">
		    <el-option
		      v-for="item in genderOptions"
		      :key="item.value"
		      :label="item.label"
		      :value="item.value">
		    </el-option>
		</el-select>
      </el-form-item>
      <el-form-item label="手机号" prop="mobile">
        <el-input
          v-model="queryParams.mobile"
          placeholder="请输入手机号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
	  <el-form-item label="用户类型" prop="userType">
		<el-select v-model="queryParams.userType" placeholder="请选择用户类型">
			<el-option
			  v-for="item in userTypeOptions"
			  :key="item.value"
			  :label="item.label"
			  :value="item.value">
			</el-option>
		</el-select>
	  </el-form-item>
      <el-form-item label="加入开始时间" prop="joinTimeStartTime" label-width="200">
        <el-date-picker clearable
          v-model="queryParams.joinTimeStartTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择加入开始时间">
        </el-date-picker>
      </el-form-item>
	  <el-form-item label="加入结束时间" prop="joinTimeEndTime" label-width="200">
	    <el-date-picker clearable
	      v-model="queryParams.joinTimeEndTime"
	      type="date"
	      value-format="yyyy-MM-dd"
	      placeholder="请选择加入结束时间">
	    </el-date-picker>
	  </el-form-item>
	  <el-form-item label="状态" prop="status">
	  		<el-select v-model="queryParams.status" placeholder="请选择用户类型">
	  			<el-option
	  			  v-for="item in statusOptions"
	  			  :key="item.value"
	  			  :label="item.label"
	  			  :value="item.value">
	  			</el-option>
	  		</el-select>
	  </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['gen:user:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['gen:user:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['gen:user:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['gen:user:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="ID" align="center" prop="id" />
      <el-table-column label="用户类型(0 真实数据 1 虚假数据)" align="center" prop="userType" />
      <el-table-column label="创建者" align="center" prop="createBy" />
      <el-table-column label="头像" align="center" prop="avatar" />
      <el-table-column label="昵称" align="center" prop="nickname" />
      <el-table-column label="姓名" align="center" prop="realName" />
      <el-table-column label="性别(0 女 1 男 2 未知)" align="center" prop="gender" />
      <el-table-column label="年龄" align="center" prop="age" />
      <el-table-column label="手机号" align="center" prop="mobile" />
      <el-table-column label="积分" align="center" prop="score" />
      <el-table-column label="加入时间" align="center" prop="joinTime" />
      <el-table-column label="加入IP" align="center" prop="joinIp" >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.joinIp, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
	  
	  <el-table-column label="状态" align="center" prop="status">
	    <template slot-scope="scope">
	      <dict-tag :options="dict.type.gen_user_status" :value="scope.row.status"/>
	    </template>
	  </el-table-column>
      <el-table-column label="状态,1:正常,0:隐藏" align="center" prop="status" />
	  
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['gen:user:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['gen:user:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />


    <!-- 添加或修改会员对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body class="dialog-box">
      <el-form ref="form" :model="form" :rules="rules" label-width="0px">
		<div class="single-box" style="margin-top: 0;">
			<h3>基本信息</h3>
			<div class="content content1">  
				<el-descriptions :column="2" size="small" :labelStyle="{width:'160px'}" border>
					<el-descriptions-item :span="2">
					  <template slot="label">
						头像
					  </template>
					  <el-form-item prop="avatar">
						<!-- <el-upload
						  ref="upload"
						  :limit="1"
						  accept=".jpg, .png"
						  :action="upload.url"
						  :headers="upload.headers"
						  :file-list="upload.fileList"
						  :on-progress="handleFileUploadProgress"
						  :on-success="handleFileSuccess"
						  :auto-upload="false">
						  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
						  <el-button style="margin-left: 10px;" size="small" type="success" :loading="upload.isUploading" @click="submitUpload">上传到服务器</el-button>
						  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
						</el-upload> -->
						
						<el-upload
						ref="upload"
						  class="avatar-uploader"
						:limit="1"
						accept=".jpg, .png"
						:headers="upload.headers"
						:file-list="upload.fileList"
						  :action="upload.url"
						  :show-file-list="false"
						  :on-success="handleFileSuccess"
						  :before-upload="beforeAvatarUpload">
						  <img v-if="form.avatar" :src="form.avatar" class="avatar">
						  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					  </el-form-item>
					</el-descriptions-item>
					<el-descriptions-item>
					  <template slot="label">
						创建者
					  </template>
					  <el-form-item prop="createBy">
						<el-input v-model="form.createBy" size="small" placeholder="请输入创建者" />
					  </el-form-item>
					</el-descriptions-item>
					<el-descriptions-item>
					  <template slot="label">
						昵称
					  </template>
					  <el-form-item prop="nickname">
						<el-input v-model="form.nickname" size="small" placeholder="请输入昵称" />
					  </el-form-item>
					</el-descriptions-item>
					<el-descriptions-item>
					  <template slot="label">
					   注册手机号
					  </template>
					  <el-form-item prop="mobile">
						<el-input v-model="form.mobile" size="small" placeholder="请输入注册手机号" />
					  </el-form-item>
					</el-descriptions-item>
					<el-descriptions-item>
					  <template slot="label">
						姓名
					  </template>
					  <el-form-item prop="realName">
						<el-input v-model="form.realName" size="small" placeholder="请输入姓名" />
					  </el-form-item>
					</el-descriptions-item>
					<el-descriptions-item>
					  <template slot="label">
						性别
					  </template>
					  <el-form-item prop="gender">
						<el-radio-group v-model="form.gender" size="small">
							<el-radio :label="0">男</el-radio>
							<el-radio :label="1">女</el-radio>
						</el-radio-group>
					  </el-form-item>
					</el-descriptions-item>
					<el-descriptions-item>
					  <template slot="label">
						出生日期
					  </template>
					  <el-form-item prop="birthday">
						<el-date-picker clearable
						  v-model="form.birthday"
						  size="small"
						  type="date"
						  value-format="yyyy-MM-dd"
						  placeholder="请选择出生日期">
						</el-date-picker>
					  </el-form-item>
					</el-descriptions-item>
					<el-descriptions-item>
					  <template slot="label">
						身高
					  </template>
					  <el-form-item prop="height">
						<el-input v-model="form.height" size="small" placeholder="请输入身高" />
					  </el-form-item>
					</el-descriptions-item>
					<el-descriptions-item>
					  <template slot="label">
						体重
					  </template>
					  <el-form-item prop="weight">
						<el-input v-model="form.weight" size="small" placeholder="请输入体重" />
					  </el-form-item>
					</el-descriptions-item>
					<el-descriptions-item>
					  <template slot="label">
						民族
					  </template>
					  <el-form-item prop="nation">
						<!-- <el-input v-model="form.nation" placeholder="请输入体重" /> -->
						<el-select v-model="form.nation" size="small" filterable placeholder="请选择">
							<el-option
							  v-for="item in nationOptions"
							  :key="item.id"
							  :label="item.nationName"
							  :value="item.id">
							</el-option>
						</el-select>
					  </el-form-item>
					</el-descriptions-item>
					<el-descriptions-item>
					  <template slot="label">
						身份证号
					  </template>
					  <el-form-item prop="idCard">
						<el-input v-model="form.idCard" size="small" placeholder="请输入身份证号" />
					  </el-form-item>
					</el-descriptions-item>
					<el-descriptions-item>
					  <template slot="label">
					   年薪
					  </template>
					  <el-form-item prop="salary">
						<el-input v-model="form.salary" size="small" placeholder="请输入年薪" />
					  </el-form-item>
					</el-descriptions-item>
					<el-descriptions-item>
					  <template slot="label">
						学历
					  </template>
					  <el-form-item prop="eduName">
						<!-- <el-input v-model="form.nation" placeholder="请输入体重" /> -->
						<el-select v-model="form.eduName" size="small" filterable placeholder="请选择">
							<el-option
							  v-for="item in eduNameOptions"
							  :key="item.id"
							  :label="item.eduName"
							  :value="item.id">
							</el-option>
						</el-select>
					  </el-form-item>
					</el-descriptions-item>
					<el-descriptions-item>
					  <template slot="label">
						毕业院校
					  </template>
					  <el-form-item prop="eduSchool">
						<el-input v-model="form.eduSchool" size="small" placeholder="请输入毕业院校" />
					  </el-form-item>
					</el-descriptions-item>
					<el-descriptions-item>
					  <template slot="label">
						院校性质
					  </template>
					  <el-form-item prop="eduType">
						<!-- <el-input v-model="form.nation" placeholder="请输入体重" /> -->
						<el-select v-model="form.eduType" size="small" filterable placeholder="请选择">
							<el-option
							  v-for="item in eduTypeOptions"
							  :key="item.id"
							  :label="item.eduTypeName"
							  :value="item.id">
							</el-option>
						</el-select>
					  </el-form-item>
					</el-descriptions-item>
					<el-descriptions-item>
					  <template slot="label">
						星座
					  </template>
					  <el-form-item prop="constellation">
						<!-- <el-input v-model="form.nation" placeholder="请输入体重" /> -->
						<el-select v-model="form.constellation" size="small" filterable placeholder="请选择">
							<el-option
							  v-for="item in constellationOptions"
							  :key="item.id"
							  :label="item.constellationName"
							  :value="item.id">
							</el-option>
						</el-select>
					  </el-form-item>
					</el-descriptions-item>
					<el-descriptions-item>
					  <template slot="label">
						属相
					  </template>
					  <el-form-item prop="zodiac">
						<!-- <el-input v-model="form.nation" placeholder="请输入体重" /> -->
						<el-select v-model="form.zodiac" size="small" filterable placeholder="请选择">
							<el-option
							  v-for="item in zodiacOptions"
							  :key="item.id"
							  :label="item.zodiacName"
							  :value="item.id">
							</el-option>
						</el-select>
					  </el-form-item>
					</el-descriptions-item>
					<el-descriptions-item>
					  <template slot="label">
						血型
					  </template>
					  <el-form-item prop="bloodType">
						<!-- <el-input v-model="form.nation" placeholder="请输入体重" /> -->
						<el-select v-model="form.bloodType" size="small" filterable placeholder="请选择">
							<el-option
							  v-for="item in bloodTypeOptions"
							  :key="item.id"
							  :label="item.bloodTypeName"
							  :value="item.id">
							</el-option>
						</el-select>
					  </el-form-item>
					</el-descriptions-item>
					<el-descriptions-item>
					  <template slot="label">
						所在地区
					  </template>
					  <el-form-item prop="addr">
						<el-cascader 
							v-model="form.addr" 
							size="small"
							ref="cascaderAddr" 
							:options="cityOptions" 
							:props="cityProps" 
							placeholder="请选择所在地区" 
							@change="handleAddrChange">
						</el-cascader>
					  </el-form-item>
					</el-descriptions-item>
					<el-descriptions-item>
					  <template slot="label">
						籍贯
					  </template>
					  <el-form-item prop="nativePlace">
						<el-cascader 
							v-model="nativePlace" 
							size="small"
							ref="cascaderNativePlace" 
							:options="cityOptions" 
							:props="cityProps" 
							placeholder="请选择籍贯" 
							@change="handleNativePlaceChange">
						</el-cascader>
					  </el-form-item>
					</el-descriptions-item>
					<el-descriptions-item>
					  <template slot="label">
						注册时间
					  </template>
					  <el-form-item prop="joinTime">
						<el-date-picker
						  clearable
						  v-model="form.joinTime"
						  size="small"
						  type="datetime"
						  placeholder="选择日期时间">
						</el-date-picker>
					  </el-form-item>
					</el-descriptions-item>
					<el-descriptions-item>
					  <template slot="label">
						注册IP
					  </template>
					  <el-form-item prop="joinIp">
						<el-input v-model="form.joinIp" size="small" placeholder="请输入注册IP" />
					  </el-form-item>
					</el-descriptions-item>
					<el-descriptions-item>
					  <template slot="label">
						状态
					  </template>
					  <el-form-item prop="status">
						<el-radio-group v-model="form.status" size="small">
							<el-radio :label="1">正常</el-radio>
							<el-radio :label="0">隐藏</el-radio>
						</el-radio-group>
					  </el-form-item>
					</el-descriptions-item>
				  </el-descriptions>
			  </div>
			</div>
		  <div class="single-box">
		  	<h3>会员相册</h3>
		  	<div class="content">
			  <el-descriptions :column="2" size="small" :labelStyle="{width:'100px'}" border>
				  <el-descriptions-item :span="2">
					<template slot="label">
					  相册
					</template>
					<el-form-item prop="albumImageList">
					  <el-upload
						ref="upload"
						class="avatar-uploader"
						list-type="picture-card"
						multiple
						:limit="6"
						accept=".jpg, .png"
						:headers="upload.headers"
						:file-list="upload.fileList"
						:action="upload.url"
						:show-file-list="false"
						:on-success="handleFileSuccess"
						:before-upload="beforeAvatarUpload">
						<img v-if="form.avatar" :src="form.albumImageList" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					  </el-upload>
					</el-form-item>
				  </el-descriptions-item>
			<!--      <el-descriptions-item>
					<template slot="label">
					  身高评分
					</template>
					<el-form-item prop="username">
					  <el-input v-model="form.username" placeholder="请输入身高评分" />
					</el-form-item>
				  </el-descriptions-item>
				  <el-descriptions-item>
					<template slot="label">
					  体重评分
					</template>
					<el-form-item prop="nickname">
					<el-input v-model="form.nickname" placeholder="请输入体重评分" />
				  </el-form-item>
				  </el-descriptions-item> -->
				</el-descriptions>
			  </div>
			</div>
			<div class="single-box">
				<h3>认证信息</h3>
				<div class="content">
					<table border="1"  cellspacing="0" cellpadding="0" class="table table-bordered">
						<thead>
							<tr><th>类型</th><th>认证</th><th>证件</th><th>状态</th></tr>
						</thead>
						<tbody>
							<tr>
								<td class="column1">实名认证</td>
								<td class="column2">
									<el-form-item label="姓名" label-width="80px" >
									  <el-input v-model="form.userAuthenticationRealName.realName" size="small" placeholder="请输入姓名" />
									</el-form-item>
									<el-form-item label="身份证号" label-width="80px" prop="idCard">
									  <el-input v-model="form.userAuthenticationRealName.idCard" size="small" placeholder="请输入身份证号" />
									</el-form-item>
								</td>
								<td class="column3">
									<el-form-item prop="avatar" label-width="120px" label="身份证正面照">
										<el-upload
											ref="upload"
											class="avatar-uploader"
											:limit="1"
											accept=".jpg, .png"
											:headers="upload.headers"
											:file-list="upload.fileList"
											:action="upload.url"
											:show-file-list="false"
											:on-success="handleFileSuccess"
											:before-upload="beforeAvatarUpload">
										  <img v-if="form.userAuthenticationRealName.frontImage" :src="form.userAuthenticationRealName.frontImage" class="avatar">
										  <div v-else class="upload-idCard">
										  	<img  src="@/assets/images/zhengmian.jpg">
										  </div>
										  <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
										</el-upload>
									</el-form-item>
									<el-form-item prop="avatar" label-width="120px" label="身份证反面照">
										<el-upload
											ref="upload"
											class="avatar-uploader"
											:limit="1"
											accept=".jpg, .png"
											:headers="upload.headers"
											:file-list="upload.fileList"
											:action="upload.url"
											:show-file-list="false"
											:on-success="handleFileSuccess"
											:before-upload="beforeAvatarUpload">
										  <img v-if="form.userAuthenticationRealName.backImage" :src="form.userAuthenticationRealName.backImage" class="avatar">
										  <div v-else class="upload-idCard">
										  	<img  src="@/assets/images/fanmian.jpg">
										  </div>
										  <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
										</el-upload>
									</el-form-item>
								</td>
								<td class="column4">
									 <el-radio-group v-model="form.userAuthenticationRealName.auditStatus">
									    <el-radio :label="19">待认证</el-radio>
									    <el-radio :label="20">已通过</el-radio>
									    <el-radio :label="30">未通过</el-radio>
									</el-radio-group>
								</td>
							</tr>
							<tr>
								<td class="column1">学历认证</td>
								<td class="column2">
									<el-form-item label="学历" label-width="80px" prop="eduId">
										<el-select v-model="form.userAuthenticationEdu.eduId" size="small" filterable placeholder="请选择">
											<el-option
											  v-for="item in eduNameOptions"
											  :key="item.id"
											  :label="item.eduName"
											  :value="item.id">
											</el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="毕业院校" label-width="80px" prop="name">
									  <el-input v-model="form.userAuthenticationEdu.school" size="small" placeholder="请输入毕业院校" />
									</el-form-item>
								</td>
								<td class="column3">
									<el-form-item prop="avatar" label-width="120px" label="毕业证/证明照">
										<el-upload
											ref="upload"
											class="avatar-uploader"
											:limit="1"
											accept=".jpg, .png"
											:headers="upload.headers"
											:file-list="upload.fileList"
											:action="upload.url"
											:show-file-list="false"
											:on-success="handleFileSuccess"
											:before-upload="beforeAvatarUpload">
										  <img v-if="form.userAuthenticationEdu.eduImages" :src="form.userAuthenticationEdu.eduImages" class="avatar">
										  <div v-else class="upload-idCard">
										  	<img  src="@/assets/images/add.jpg">
										  </div>
										  <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
										</el-upload>
									</el-form-item>
								</td>
								<td class="column4">
									<el-radio-group v-model="form.userAuthenticationEdu.auditStatus">
										<el-radio :label="19">待认证</el-radio>
										<el-radio :label="20">已通过</el-radio>
										<el-radio :label="30">未通过</el-radio>
									</el-radio-group>
								</td>
							</tr>
							<tr>
								<td class="column1">收入认证</td>
								<td class="column2">
									<el-form-item label="收入" label-width="80px" prop="salaryId">
										<el-select v-model="form.userAuthenticationSalary.salaryId" size="small" filterable placeholder="请选择">
											<el-option
											  v-for="item in allSalaryList"
											  :key="item.id"
											  :label="item.salaryName"
											  :value="item.id">
											</el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="说明" label-width="80px" prop="salaryRemark">
									  <el-input v-model="form.userAuthenticationSalary.salaryRemark" size="small" />
									</el-form-item>
								</td>
								<td class="column3">
									<el-form-item prop="avatar" label-width="120px" label="收入证明">
										<el-upload
											ref="upload"
											class="avatar-uploader"
											:limit="1"
											accept=".jpg, .png"
											:headers="upload.headers"
											:file-list="upload.fileList"
											:action="upload.url"
											:show-file-list="false"
											:on-success="handleFileSuccess"
											:before-upload="beforeAvatarUpload">
										  <img v-if="form.userAuthenticationSalary.salaryImages" :src="form.userAuthenticationSalary.salaryImages" class="avatar">
										  <div v-else class="upload-idCard">
											<img  src="@/assets/images/add.jpg">
										  </div>
										  <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
										</el-upload>
									</el-form-item>
								</td>
								<td class="column4">
									<el-radio-group v-model="form.userAuthenticationSalary.auditStatus">
										<el-radio :label="19">待认证</el-radio>
										<el-radio :label="20">已通过</el-radio>
										<el-radio :label="30">未通过</el-radio>
									</el-radio-group>
								</td>
							</tr>
							<tr>
								<td class="column1">车辆认证</td>
								<td class="column2">
									<el-form-item label="购车状态" label-width="80px" prop="carStatus">
										<el-select v-model="form.userAuthenticationCar.carStatus" size="small" filterable placeholder="请选择">
											<el-option
											  v-for="item in carStatusOptions"
											  :key="item.id"
											  :label="item.label"
											  :value="item.id">
											</el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="说明/想法" label-width="80px" prop="name">
									  <el-input v-model="form.userAuthenticationCar.carRemark" size="small" />
									</el-form-item>
								</td>
								<td class="column3">
									<el-form-item prop="avatar" label-width="120px" label="行驶证">
										<el-upload
											ref="upload"
											class="avatar-uploader"
											:limit="1"
											accept=".jpg, .png"
											:headers="upload.headers"
											:file-list="upload.fileList"
											:action="upload.url"
											:show-file-list="false"
											:on-success="handleFileSuccess"
											:before-upload="beforeAvatarUpload">
										  <img v-if="form.userAuthenticationCar.carImages" :src="form.userAuthenticationCar.carImages" class="avatar">
										  <div v-else class="upload-idCard">
											<img  src="@/assets/images/add.jpg">
										  </div>
										  <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
										</el-upload>
									</el-form-item>
								</td>
								<td class="column4">
									<el-radio-group v-model="form.userAuthenticationCar.auditStatus">
										<el-radio :label="19">待认证</el-radio>
										<el-radio :label="20">已通过</el-radio>
										<el-radio :label="30">未通过</el-radio>
									</el-radio-group>
								</td>
							</tr>
							<tr>
								<td class="column1">房产认证</td>
								<td class="column2">
									<el-form-item label="购房状态" label-width="80px" prop="houseStatus">
										<el-select v-model="form.userAuthenticationHouse.houseStatus" size="small" filterable placeholder="请选择">
											<el-option
											  v-for="item in houseStatusOptions"
											  :key="item.id"
											  :label="item.label"
											  :value="item.id">
											</el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="说明/想法" label-width="80px" prop="name">
									  <el-input v-model="form.userAuthenticationHouse.houseRemark" size="small" />
									</el-form-item>
								</td>
								<td class="column3">
									<el-form-item prop="avatar" label-width="120px" label="房产证/购房合同">
										<el-upload
											ref="upload"
											class="avatar-uploader"
											:limit="1"
											accept=".jpg, .png"
											:headers="upload.headers"
											:file-list="upload.fileList"
											:action="upload.url"
											:show-file-list="false"
											:on-success="handleFileSuccess"
											:before-upload="beforeAvatarUpload">
										  <img v-if="form.userAuthenticationHouse.houseImages" :src="form.userAuthenticationHouse.houseImages" class="avatar">
										  <div v-else class="upload-idCard">
											<img  src="@/assets/images/add.jpg">
										  </div>
										  <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i> -->
										</el-upload>
									</el-form-item>
								</td>
								<td class="column4">
									<el-radio-group v-model="form.userAuthenticationHouse.auditStatus">
										<el-radio :label="19">待认证</el-radio>
										<el-radio :label="20">已通过</el-radio>
										<el-radio :label="30">未通过</el-radio>
									</el-radio-group>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<div class="userType">
			<div class="wrap">
				<el-form-item label="用户类型" label-width="100" prop="userType">
					<el-radio-group v-model="form.userType">
						<el-radio :label="0">真实用户</el-radio>
						<el-radio :label="1">虚拟用户</el-radio>
					</el-radio-group>
				</el-form-item>
			</div>
			</div>
		
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listUser, getUser, delUser, addUser, updateUser } from "@/api/user/user";
import { getAllAreaList, getAllBloodTypeList, getAllCompanyNatureList, getAllConstellationList, getAllEduList, getAllEduTypeList, getAllJobList, getAllNationList, getAllSalaryList, getAllZodiacList} from "@/api/index";
import { getToken } from "@/utils/auth";
// import cityData from '@/assets/json/pca-code.json';//省市区

export default {
  name: "User",
  dicts: ['gen_user_status'],
  data() {
    return {
	  cityOptions: [],
	  cityProps:{
		  value:'id',   // 指定选项的 值 为选项对象的某个属性值
		  label:'name',   // 指定选项 标签 为选项对象的某个属性值	
		  children: 'chirdList'    //指定选项的 子选项 为选项对象的某个属性值
	  },
	  addr:'',//所在地区
	  nativePlace:'',//籍贯
	  // 上传参数
	  upload: {
	    // 是否禁用上传
	    isUploading: false,
	    // 设置上传的请求头部
	    headers: { Authorization: "Bearer " + getToken() },
	    // 上传的地址
	    // url: process.env.VUE_APP_BASE_API + "/common/upload",
	    url: process.env.VUE_APP_BASE_API + "/file/alibyunupLoadFile",
	    // 上传的文件列表
	    fileList: []
	  },
	  //性别选项
	  genderOptions: [{
		value: '0',
		label: '女'
	  }, {
		value: '1',
		label: '男'
	  }, {
		value: '2',
		label: '未知'
	  }],
	  statusOptions:[],
	  //用户类型
	  userTypeOptions: [{
		value: '0',
		label: '真实数据'
	  }, {
		value: '1',
		label: '虚假数据'
	  }],
	  //学历
	  eduNameOptions: [],
	  //院校性质
	  eduTypeOptions: [],
	  //星座
	  constellationOptions: [],
	  //属相
	  zodiacOptions: [],
	  //血型
	  bloodTypeOptions: [],
	  //民族选项
	  nationOptions: [],
	  //年薪
	  allSalaryList:[],
	  //购车状态
	  carStatusOptions:[
		{
		  id:10,
		  label:'已购车'
		},
		{
		  id:20,
		  label:'已购车，按揭中'
		},
		{
		  id:30,
		  label:'暂无能力购车'
		},
		{
		  id:40,
		  label:'计划购车'
		}
	  ],
	  //购房状态
	  houseStatusOptions:[
	  		{
	  		  id:10,
	  		  label:'已购房'
	  		},
	  		{
	  		  id:20,
	  		  label:'已购房，按揭中'
	  		},
	  		{
	  		  id:30,
	  		  label:'暂无能力购房'
	  		},
	  		{
	  		  id:40,
	  		  label:'计划购房'
	  		}
	  ],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 会员表格数据
      userList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userType: null,
        createBy: null,
        nickname: null,
        realName: null,
        gender: null,
		status:null,
        mobile: null,
        joinTimeStartTime: null,
        joinTimeEndTime: null,
      },
      // 表单参数
      form: {
		  //实名认证
		  userAuthenticationRealName:{
		  	realName:null,
		  	idCard:null,
		  	frontImage:null,
		  	backImage:null,
			auditStatus:null
		  },
		  //学历认证
		  userAuthenticationEdu:{
		  	eduId:null,
			school:null,
			eduImages:null,
			auditStatus:null
		  },
		  //收入认证
		  userAuthenticationSalary:{
		  	salaryId:null,
			salaryImages:null,
			salaryRemark:null,
			auditStatus:null
		  },
		  //车辆认证
		  userAuthenticationCar:{
		  	carStatus:null,
			carImages:null,
			carRemark:null,
			auditStatus:null
		  },
		  //房产认证
		  userAuthenticationHouse:{
		  	houseStatus:null,
			houseImages:null,
			houseRemark:null,
			auditStatus:null
		  }
	  },
      // 表单校验
      rules: {
        createBy: [
          { required: true, message: "创建者不能为空", trigger: "blur" }
        ],
		gender: [
          { required: true, message: "请选择性别", trigger: "blur" }
        ],
		addr: [
          { required: true, message: "请选择所在地区", trigger: "blur" }
        ],
        realName: [
          { required: true, message: "用户真实姓名不能为空", trigger: "blur" }
        ],
        mobile: [
          { required: true, message: "手机号码不能为空", trigger: "blur" }
        ],
        userType: [
          { required: true, message: "请选择用户类型", trigger: "blur" }
        ],
		status: [
		  { required: true, message: "请选择状态", trigger: "blur" }
		]
        
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
	/** 查询民族列表 */
	getAllNationList() {
	  this.loading = true;
	  getAllNationList().then(response => {
	    this.nationOptions = response.rows;
	    this.loading = false;
	  });
	},
	
	/** 查询学历数据 */
	getAllEduList() {
	  this.loading = true;
	  getAllEduList().then(response => {
	    this.eduNameOptions = response.rows;
	    this.loading = false;
	  });
	},
	
	/** 查询院校性质数据 */
	getAllEduTypeList() {
	  this.loading = true;
	  getAllEduTypeList().then(response => {
	    this.eduTypeOptions = response.rows;
	    this.loading = false;
	  });
	},
	/** 查询星座 */
	getAllConstellationList() {
	  this.loading = true;
	  getAllConstellationList().then(response => {
		this.constellationOptions = response.rows;
		this.loading = false;
	  });
	},
	
	/** 查询属相 */
	getAllZodiacList() {
	  this.loading = true;
	  getAllZodiacList().then(response => {
		this.zodiacOptions = response.rows;
		this.loading = false;
	  });
	},
	
	/** 查询血型 */
	getAllBloodTypeList() {
	  this.loading = true;
	  getAllBloodTypeList().then(response => {
		this.bloodTypeOptions = response.rows;
		this.loading = false;
	  });
	},
	
	/** 查询所在地区 */
	getAllAreaList() {
	  this.loading = true;
	  getAllAreaList().then(response => {
		this.cityOptions = response.rows;
		this.loading = false;
	  });
	},
	
	/** 查询年薪 */
	getAllSalaryList() {
	  this.loading = true;
	  getAllSalaryList().then(response => {
		this.allSalaryList = response.rows;
		this.loading = false;
	  });
	},
	
    /** 查询会员列表 */
    getList() {
      this.loading = true;
      listUser(this.queryParams).then(response => {
        this.userList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
	
	
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        userType: null,
        createBy: null,
        nickname: null,
        mobile: null,
        realName: null,
		age:null,
        gender: null,
		birthday:null,
		height:null,
		weight:null,
		nation:null,
		idCard:null,
		eduName:null,
		eduSchool:null,
		eduType:null,
		constellation:null,
		zodiac:null,
		bloodType:null,
		locationProvince:null,
		locationProvinceId:null,
		locationCity:null,
		locationCityId:null,
		locationArea:null,
		locationAreaId:null,
		nativePlace:null,
		joinTime:null,
		joinIp:null,
		status:null,
		salary:null,
		addr:null,
		//实名认证
		userAuthenticationRealName:{
			realName:null,
			idCard:null,
			frontImage:null,
			backImage:null,
			auditStatus:null
		},
		//学历认证
		userAuthenticationEdu:{
			eduId:null,
			school:null,
			eduImages:null,
			auditStatus:null
		},
		//收入认证
		userAuthenticationSalary:{
			salaryId:null,
			salaryImages:null,
			salaryRemark:null,
			auditStatus:null
		},
		//车辆认证
		userAuthenticationCar:{
			carStatus:null,
			carImages:null,
			carRemark:null,
			auditStatus:null
		},
		//房产认证
		userAuthenticationHouse:{
			houseStatus:null,
			houseImages:null,
			houseRemark:null,
			auditStatus:null
		},
		userType:null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
	  this.upload.fileList = [];
      this.reset();
      this.open = true;
      this.title = "添加会员";
	  // 获取下拉列表数据
	  this.getAllNationList();
	  this.getAllEduList();
	  this.getAllEduTypeList();
	  this.getAllConstellationList();
	  this.getAllZodiacList();
	  this.getAllBloodTypeList();
	  this.getAllAreaList();
	  this.getAllSalaryList();
	  
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
	  this.upload.fileList = [{ name: this.form.fileName, url: this.form.filePath }];
      this.reset();
	  // 获取下拉列表数据
	  	this.getAllNationList();
	  	this.getAllEduList();
	  	this.getAllEduTypeList();
	  	this.getAllConstellationList();
	  	this.getAllZodiacList();
	  	this.getAllBloodTypeList();
	  	this.getAllAreaList();
	  	this.getAllSalaryList();
      const id = row.id || this.ids
      getUser(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改会员";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateUser(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addUser(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
	// handleAvatarSuccess(res, file) {
	// 	this.imageUrl = URL.createObjectURL(file.raw);
	// },
	beforeAvatarUpload(file) {
		// const isJPG = file.type === 'image/jpeg';
		const isLt2M = file.size / 1024 / 1024 < 2;

		// if (!isJPG) {
		//   this.$message.error('上传头像图片只能是 JPG 格式!');
		// }
		if (!isLt2M) {
		  this.$message.error('上传头像图片大小不能超过 2MB!');
		}
		// return isJPG && isLt2M;
		return isLt2M;
	},
	// 文件上传成功处理
	handleFileSuccess(response, file, fileList) {
	  this.upload.isUploading = false;
	  this.form.avatar = response.url;
	  this.msgSuccess(response.msg);
	},
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除会员编号为"' + ids + '"的数据项？').then(function() {
        return delUser(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('gen/user/export', {
        ...this.queryParams
      }, `user_${new Date().getTime()}.xlsx`)
    },
	handleAddrChange(e){
		// 获取当前选中节点的数组
		let addrNode = this.$refs['cascaderAddr'].getCheckedNodes()[0]
		// let addrText = addrNode.pathLabels.join("-")
		let pathLabels = addrNode.pathLabels
		let path = addrNode.path
		// console.log('addrNode',addrNode, addrText);
		this.form.locationProvince = pathLabels[0]
		this.form.locationProvinceId = path[0]
		this.form.locationCity = pathLabels[1]
		this.form.locationCityId = path[1]
		debugger
		this.form.locationArea = pathLabels[2]
		this.form.locationAreaId = path[2]
		
	},
	handleNativePlaceChange(e){
		// 获取当前选中节点的数组
		let nativePlaceNode = this.$refs['cascaderNativePlace'].getCheckedNodes()[0]
		this.form.nativePlace = nativePlaceNode.pathLabels.join("-")
	}
	
  }
};
</script>
<style lang="scss" scoped>
	.avatar-uploader .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	  }
	  .avatar-uploader .el-upload:hover {
	    border-color: #409EFF;
	  }
	  .avatar-uploader-icon {
	    font-size: 24px;
	    color: #8c939d;
	    width: 70px;
	    height: 70px;
	    line-height: 70px;
	    text-align: center;
		border:1px dashed #eee;
	  }
	  .avatar {
	    width: 70px;
	    height: 70px;
	    display: block;
	  }
	  .dialog-box{
		  .content{
			  .el-form-item{
				margin-bottom: 8px;
			  } 
		  }
		  .content1{
			  .el-form-item{
			    margin-bottom: 0;
			  } 
		  }
		  .el-select,.el-cascader,.el-date-editor{
			width: 100%;  
		  }
		  .userType{
			  display: flex; 
			  justify-content: center;
			  .wrap{
				 display: inline-block; 
				 width: 280px; 
			  }
		  }
	  }
	  ::v-deep .el-descriptions .is-bordered .el-descriptions-item__cell{
	  	border: 1px solid #f5f5f5;
	  }
	  ::v-deep .el-upload--picture-card{
		  width: 70px;
		  height: 70px;
		  line-height: 70px;
		  text-align: center;
		  border:1px dashed #eee;
	  }
	  .single-box{
		  margin-top: 20px;
		  margin-bottom: 20px;
		  border: 1px solid #f4f4f4;
		  h3{
			  color: #333333;
			  background-color: #f5f5f5;
			  border-color: #ddd;
			  font-size: 14px;
			  padding: 10px 15px;
			  margin: 0;
		  }
		  .content{
			  padding: 15px;
			  .column1{
				  text-align: center;
				  width: 15%;
			  }
			  .column2{
				  padding-top: 10px;
				  padding-right: 10px;
				  width: 40%;
			  }
			  .column3{
				  padding-top: 10px;
				  .upload-idCard{
					  width: 120px;
					  img{
						  width: 100%;
						  border-radius: 10px;
					  }
				  }
			  }
			  .column4{
				  width: 100px;
				  padding-left: 10px;
			  }
		  }
	  }
	  .table{
		  width: 100%;
		  max-width: 100%;
	  }
	  .table-bordered,.table-bordered > thead > tr > th{
		  padding: 5px;
	  }
	  .table-bordered{
		  border: 0;
	  }
	  .table-bordered > thead > tr > th,.table-bordered > tbody > tr > td{
		  border: 1px solid #f4f4f4;
	  }
	  .table-bordered > tbody > tr:nth-of-type(odd) {
	      background-color: #f9f9f9;
	  }
	  
</style>